<template>
  <q-layout view="lHh Lpr lFf">
    <q-header >
      <q-toolbar class="bg-white text-primary shadow-2">
        <q-btn flat dense round @click="leftDrawerOpen = !leftDrawerOpen" icon="menu" aria-label="Menu"/>
        <q-toolbar-title>
        </q-toolbar-title>
        <q-space/>
        <div class="q-gutter-sm row items-center no-wrap">
          <q-btn round dense flat color="white" :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
                 @click="$q.fullscreen.toggle()"
                 v-if="$q.screen.gt.sm">
          </q-btn>

          <q-btn round dense flat color="secondary" icon="notifications">
            <q-badge color="red" text-color="white" floating>
              5
            </q-badge>
            <q-menu
            >
              <q-list style="min-width: 100px">
                <messages></messages>
                <q-card class="text-center no-shadow no-border">
                  <q-btn label="View All" style="max-width: 120px !important;" flat dense
                         class="text-indigo-8"></q-btn>
                </q-card>
              </q-list>
            </q-menu>
          </q-btn>

<!--          <q-btn round flat>-->
<!--            <q-avatar size="26px">-->
<!--              <img src="https://cdn.quasar.dev/img/boy-avatar.png">-->
<!--            </q-avatar>-->
<!--          </q-btn>-->
          <user-tag></user-tag>
        </div>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      content-class="bg-primary text-white custom-scroll"
    >
      <q-list>
        <q-item to="/home" active-class="q-item-no-link-highlighting">
          <q-item-section avatar>
            <q-icon name="dashboard"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>首页</q-item-label>
          </q-item-section>
        </q-item>
        <q-expansion-item
          group="somegroup"
          icon="add_shopping_cart"
          label="商品"
          default-opened
          header-class="text-white"
        >
          <q-item to="/product" active-class="q-item-no-link-highlighting">
            <q-item-section class="q-ml-md" avatar>
              <q-icon name="api"/>
            </q-item-section>
            <q-item-section>
              <q-item-label>商品管理</q-item-label>
            </q-item-section>
          </q-item>
          <q-item to="/class" active-class="q-item-no-link-highlighting">
            <q-item-section class="q-ml-md" avatar>
              <q-icon name="class"/>
            </q-item-section>
            <q-item-section>
              <q-item-label>分类管理</q-item-label>
            </q-item-section>
          </q-item>
        </q-expansion-item>
        <q-expansion-item
          group="somegroup"
          icon="card_giftcard"
          label="奖品"
          header-class="text-white"
        >
          <q-item to="/lottery" active-class="q-item-no-link-highlighting">
            <q-item-section class="q-ml-md" avatar>
              <q-icon name="card_travel"/>
            </q-item-section>
            <q-item-section>
              <q-item-label>奖品管理</q-item-label>
            </q-item-section>
          </q-item>
          <q-item to="/lotteryClass" active-class="q-item-no-link-highlighting">
            <q-item-section class="q-ml-md" avatar>
              <q-icon name="bookmarks"/>
            </q-item-section>
            <q-item-section>
              <q-item-label>分类管理</q-item-label>
            </q-item-section>
          </q-item>
        </q-expansion-item>

        <q-item to="/productJoinRecord" active-class="q-item-no-link-highlighting">
          <q-item-section avatar>
            <q-icon name="alarm_on"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>商品参与记录</q-item-label>
          </q-item-section>
        </q-item>

        <q-item to="/advert" active-class="q-item-no-link-highlighting">
          <q-item-section avatar>
            <q-icon name="preview"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>广告管理</q-item-label>
          </q-item-section>
        </q-item>


        <q-item to="/user" active-class="q-item-no-link-highlighting">
          <q-item-section avatar>
            <q-icon name="person"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>用户管理</q-item-label>
          </q-item-section>
        </q-item>
        <q-item to="/manager" active-class="q-item-no-link-highlighting">
          <q-item-section avatar>
            <q-icon name="person"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>管理员管理</q-item-label>
          </q-item-section>
        </q-item>
        <q-item to="/role" active-class="q-item-no-link-highlighting">
          <q-item-section avatar>
            <q-icon name="rule"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>角色管理</q-item-label>
          </q-item-section>
        </q-item>
        <q-item to="/menu" active-class="q-item-no-link-highlighting">
          <q-item-section avatar>
            <q-icon name="reorder"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>菜单管理</q-item-label>
          </q-item-section>
        </q-item>

        <q-item to="/problem" active-class="q-item-no-link-highlighting">
          <q-item-section avatar>
            <q-icon name="contact_support"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>常见问题</q-item-label>
          </q-item-section>
        </q-item>
<!--        <q-item to="/Dashboard2" active-class="q-item-no-link-highlighting">-->
<!--          <q-item-section avatar>-->
<!--            <q-icon name="dashboard"/>-->
<!--          </q-item-section>-->
<!--          <q-item-section>-->
<!--            <q-item-label>CRM Dashboard</q-item-label>-->
<!--          </q-item-section>-->
<!--        </q-item>-->
<!--        <q-expansion-item-->
<!--          icon="pages"-->
<!--          label="Pages"-->
<!--        >-->
<!--          <q-list class="q-pl-lg">-->
<!--            <q-item to="/Login-1" active-class="q-item-no-link-highlighting">-->
<!--              <q-item-section avatar>-->
<!--                <q-icon name="email"/>-->
<!--              </q-item-section>-->
<!--              <q-item-section>-->
<!--                <q-item-label>Login-1</q-item-label>-->
<!--              </q-item-section>-->
<!--            </q-item>-->
<!--            <q-item to="/Lock" active-class="q-item-no-link-highlighting">-->
<!--              <q-item-section avatar>-->
<!--                <q-icon name="lock"/>-->
<!--              </q-item-section>-->
<!--              <q-item-section>-->
<!--                <q-item-label>Lock Screen</q-item-label>-->
<!--              </q-item-section>-->
<!--            </q-item>-->
<!--            <q-item to="/Lock-2" active-class="q-item-no-link-highlighting">-->
<!--              <q-item-section avatar>-->
<!--                <q-icon name="lock"/>-->
<!--              </q-item-section>-->
<!--              <q-item-section>-->
<!--                <q-item-label>Lock Screen - 2</q-item-label>-->
<!--              </q-item-section>-->
<!--            </q-item>-->
<!--            <q-item to="/Pricing" active-class="q-item-no-link-highlighting">-->
<!--              <q-item-section avatar>-->
<!--                <q-icon name="list"/>-->
<!--              </q-item-section>-->
<!--              <q-item-section>-->
<!--                <q-item-label>Pricing</q-item-label>-->
<!--              </q-item-section>-->
<!--            </q-item>-->
<!--            <q-item-label header class="text-weight-bolder text-white">Generic</q-item-label>-->
<!--            <q-item to="/Profile" active-class="q-item-no-link-highlighting">-->
<!--              <q-item-section avatar>-->
<!--                <q-icon name="person"/>-->
<!--              </q-item-section>-->
<!--              <q-item-section>-->
<!--                <q-item-label>User Profile</q-item-label>-->
<!--              </q-item-section>-->
<!--            </q-item>-->
<!--            <q-item to="/Maintenance" active-class="q-item-no-link-highlighting">-->
<!--              <q-item-section avatar>-->
<!--                <q-icon name="settings"/>-->
<!--              </q-item-section>-->
<!--              <q-item-section>-->
<!--                <q-item-label>Maintenance</q-item-label>-->
<!--              </q-item-section>-->
<!--            </q-item>-->
<!--          </q-list>-->
<!--        </q-expansion-item>-->
<!--        <q-expansion-item-->
<!--          icon="map"-->
<!--          label="Maps"-->
<!--        >-->
<!--          <q-list class="q-pl-lg">-->
<!--            <q-item to="/Map" active-class="q-item-no-link-highlighting">-->
<!--              <q-item-section avatar>-->
<!--                <q-icon name="map"/>-->
<!--              </q-item-section>-->
<!--              <q-item-section>-->
<!--                <q-item-label>Map</q-item-label>-->
<!--              </q-item-section>-->
<!--            </q-item>-->
<!--            <q-item to="/MapMarker" active-class="q-item-no-link-highlighting">-->
<!--              <q-item-section avatar>-->
<!--                <q-icon name="location_on"/>-->
<!--              </q-item-section>-->
<!--              <q-item-section>-->
<!--                <q-item-label>Map Marker</q-item-label>-->
<!--              </q-item-section>-->
<!--            </q-item>-->
<!--            <q-item to="/StreetView" active-class="q-item-no-link-highlighting">-->
<!--              <q-item-section avatar>-->
<!--                <q-icon name="streetview"/>-->
<!--              </q-item-section>-->
<!--              <q-item-section>-->
<!--                <q-item-label>Street View</q-item-label>-->
<!--              </q-item-section>-->
<!--            </q-item>-->
<!--          </q-list>-->
<!--        </q-expansion-item>-->

<!--        <q-item to="/Mail" active-class="q-item-no-link-highlighting">-->
<!--          <q-item-section avatar>-->
<!--            <q-icon name="email"/>-->
<!--          </q-item-section>-->
<!--          <q-item-section>-->
<!--            <q-item-label>Mail</q-item-label>-->
<!--          </q-item-section>-->
<!--        </q-item>-->
<!--        <q-item to="/TreeTable" active-class="q-item-no-link-highlighting">-->
<!--          <q-item-section avatar>-->
<!--            <q-icon name="list"/>-->
<!--          </q-item-section>-->
<!--          <q-item-section>-->
<!--            <q-item-label>TreeTable</q-item-label>-->
<!--          </q-item-section>-->
<!--        </q-item>-->
<!--        <q-item to="/Charts" active-class="q-item-no-link-highlighting">-->
<!--          <q-item-section avatar>-->
<!--            <q-icon name="insert_chart"/>-->
<!--          </q-item-section>-->
<!--          <q-item-section>-->
<!--            <q-item-label>Charts</q-item-label>-->
<!--          </q-item-section>-->
<!--        </q-item>-->
<!--        <q-item to="/Cards" active-class="q-item-no-link-highlighting">-->
<!--          <q-item-section avatar>-->
<!--            <q-icon name="card_giftcard"/>-->
<!--          </q-item-section>-->
<!--          <q-item-section>-->
<!--            <q-item-label>Cards</q-item-label>-->
<!--          </q-item-section>-->
<!--        </q-item>-->
<!--        <q-item to="/Tables" active-class="q-item-no-link-highlighting">-->
<!--          <q-item-section avatar>-->
<!--            <q-icon name="table_chart"/>-->
<!--          </q-item-section>-->
<!--          <q-item-section>-->
<!--            <q-item-label>Tables</q-item-label>-->
<!--          </q-item-section>-->
<!--        </q-item>-->
<!--        <q-item to="/Contact" active-class="q-item-no-link-highlighting">-->
<!--          <q-item-section avatar>-->
<!--            <q-icon name="person"/>-->
<!--          </q-item-section>-->
<!--          <q-item-section>-->
<!--            <q-item-label>Contact</q-item-label>-->
<!--          </q-item-section>-->
<!--        </q-item>-->
<!--        <q-item to="/Checkout" active-class="q-item-no-link-highlighting">-->
<!--          <q-item-section avatar>-->
<!--            <q-icon name="check_circle_outline"/>-->
<!--          </q-item-section>-->
<!--          <q-item-section>-->
<!--            <q-item-label>Checkout</q-item-label>-->
<!--          </q-item-section>-->
<!--        </q-item>-->
<!--        <q-item to="/Calendar" active-class="q-item-no-link-highlighting">-->
<!--          <q-item-section avatar>-->
<!--            <q-icon name="date_range"/>-->
<!--          </q-item-section>-->
<!--          <q-item-section>-->
<!--            <q-item-label>Calendar</q-item-label>-->
<!--          </q-item-section>-->
<!--        </q-item>-->
<!--        <q-item to="/Taskboard" active-class="q-item-no-link-highlighting">-->
<!--          <q-item-section avatar>-->
<!--            <q-icon name="done"/>-->
<!--          </q-item-section>-->
<!--          <q-item-section>-->
<!--            <q-item-label>Taskboard</q-item-label>-->
<!--          </q-item-section>-->
<!--        </q-item>-->
<!--        <q-item to="/Pagination" active-class="q-item-no-link-highlighting">-->
<!--          <q-item-section avatar>-->
<!--            <q-icon name="date_range"/>-->
<!--          </q-item-section>-->
<!--          <q-item-section>-->
<!--            <q-item-label>Pagination</q-item-label>-->
<!--          </q-item-section>-->
<!--        </q-item>-->
<!--        <q-item to="/Ecommerce" active-class="q-item-no-link-highlighting">-->
<!--          <q-item-section avatar>-->
<!--            <q-icon name="shopping_cart"/>-->
<!--          </q-item-section>-->
<!--          <q-item-section>-->
<!--            <q-item-label>Product Catalogues</q-item-label>-->
<!--          </q-item-section>-->
<!--        </q-item>-->
<!--        <q-expansion-item-->
<!--          icon="menu_open"-->
<!--          label="Menu Levels"-->
<!--        >-->
<!--          <q-item class="q-ml-xl" active-class="q-item-no-link-highlighting">-->
<!--            <q-item-section>-->
<!--              <q-item-label>Level 1</q-item-label>-->
<!--            </q-item-section>-->
<!--          </q-item>-->
<!--          <q-expansion-item-->
<!--            :header-inset-level="0.85"-->
<!--            label="Level 2"-->
<!--          >-->
<!--            <q-item class="q-ml-xl" style="margin-left: 55px  !important;" active-class="q-item-no-link-highlighting">-->
<!--              <q-item-section>-->
<!--                <q-item-label>Level 2.1</q-item-label>-->
<!--              </q-item-section>-->
<!--            </q-item>-->
<!--            <q-expansion-item-->
<!--              :header-inset-level="1"-->
<!--              label="Level 2.2"-->
<!--            >-->
<!--              <q-item style="margin-left: 65px  !important;" active-class="q-item-no-link-highlighting">-->
<!--                <q-item-section>-->
<!--                  <q-item-label>Level 2.2.1</q-item-label>-->
<!--                </q-item-section>-->
<!--              </q-item>-->
<!--              <q-item style="margin-left: 65px  !important;" active-class="q-item-no-link-highlighting">-->
<!--                <q-item-section>-->
<!--                  <q-item-label>Level 2.2.2</q-item-label>-->
<!--                </q-item-section>-->
<!--              </q-item>-->
<!--            </q-expansion-item>-->
<!--          </q-expansion-item>-->
<!--        </q-expansion-item>-->
      </q-list>
    </q-drawer>

    <q-page-container class="bg-grey-2">
      <router-view/>
    </q-page-container>
  </q-layout>
</template>

<script>
    import EssentialLink from 'components/EssentialLink'
    import Messages from "./Messages";

    export default {
        name: 'MainLayout',

        components: {
            Messages,
            EssentialLink,
          userTag: resolve => { require(['src/components/public/user-tag'], resolve) },
        },

        data() {
            return {
                leftDrawerOpen: false,
            }
        }
    }
</script>

<style>
  .custom-scroll::-webkit-scrollbar {/*滚动条整体样式*/

    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/

    height: 1px;

  }

  .custom-scroll::-webkit-scrollbar-thumb {/*滚动条里面小方块*/

    border-radius: 4px;

    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

    background: #249aff;

  }

  .custom-scroll::-webkit-scrollbar-track {/*滚动条里面轨道*/

    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

    border-radius: 4px;

    background: rgb(54,54,54);

  }
</style>
